<template>
    <div id="app">
        <!-- head -->
        <div style="height: 40px; line-height: 60px; background-color: white; margin-bottom: 20px">
            <img src="@/assets/logo.png" alt="" style="width: 40px; position: relative; top: 18px; left: 20px">
            <el-link to="/" underline="false" style="margin-left: 25px; font-size: 24px">付款交易子系统</el-link>
        </div>

        <!-- left and body -->
        <div style="display: flex">
            <div style="width: 200px; min-height:calc(100vh - 100px); overflow: hidden; margin-right: 2px; background-color: white">
                <el-menu
                    default-active="/"
                    router class="el-menu-demo">
                    <el-menu-item :index="'/'">
                        <i class="el-icon-house"></i>
                        <span slot="title">用户页</span>
                    </el-menu-item>
                    <el-menu-item :index="`/${type[userType].name}`">
                        <i class="el-icon-house"></i>
                        <span slot="title">商品页</span>
                    </el-menu-item>
                    <el-menu-item index="/order">
                        <i class="el-icon-info"></i>
                        <span slot="title">查看订单</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <div style="flex: 1; background-color: white">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            type:[{name:'buyer'},{name:'seller'}],
            userType: 0,
        }
    },
    UserType: 1,
    set(type){
        this.userType = type
    },
    methods:{

    }
}
</script>